<template>
  <div v-if="showPagination" class="pagination-bar">
    <div class="pagination-content">
      <span 
        class="page-btn" 
        :class="{disabled: currentPage === 1}" 
        @click="handlePageChange(currentPage - 1)"
      >
        ◁
      </span>
      <span class="page-num">{{ currentPage }}</span>
      <span 
        class="page-btn" 
        :class="{disabled: currentPage === totalPages}" 
        @click="handlePageChange(currentPage + 1)"
      >
        ▷
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaginationBar',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    handlePageChange(page) {
      if (page < 1 || page > this.totalPages) return
      this.$emit('page-change', page)
    }
  }
}
</script>

<style scoped>
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 0 0;
  font-size: 1.3em;
  gap: 1.5em;
  position: relative;
  width: 100%;
}

.pagination-content {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.page-btn {
  cursor: pointer;
  color: #166d80;
  font-weight: bold;
  padding: 0 0.5em;
  user-select: none;
  transition: color 0.3s ease;
}

.page-btn:hover:not(.disabled) {
  color: #0f5a6b;
}

.page-btn.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.page-num {
  font-size: 1.2em;
  color: #333;
  font-weight: bold;
}
</style> 